<template>
  <div class="right-bar">
    <el-switch v-model="switchValue" size="small" title="是否自由绘制" />
    <div>
      <el-button :icon="Location" circle value="Point" title="绘制点" @click="toDraw('Point', store.globalMap)" />
    </div>
    <div>
      <el-button :icon="Share" circle value="LineString" title="绘制线"
        @click="toDraw('LineString', store.globalMap, switchValue)" />
    </div>
    <div>
      <el-button :icon="House" circle value="Polygon" title="绘制面"
        @click="toDraw('Polygon', store.globalMap, switchValue)" />
    </div>
    <div>
      <el-button :icon="PictureRounded" circle value="Circle" title="绘制圆" @click="toDraw('Circle', store.globalMap)" />
    </div>
    <div>
      <el-button :icon="Delete" circle value="LinearRing" title="清空绘制" @click="clearAll(store.globalMap)" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  Location,
  Share,
  House,
  PictureRounded,
  Delete,
} from "@element-plus/icons-vue";
import { useStore } from "../store";
import olMap from "../utils/olUtils";
const store = useStore();
// 'Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', or 'Circle'.

const switchValue = ref(false);
const toDraw = (type, map, isFreeHand = false) => {
  olMap.draw(type, map, isFreeHand);
};
</script>

<style scoped>
.right-bar {
  position: absolute;
  z-index: 100;
  bottom: 15vh;
  right: 0.1vw;
  width: 2vw;
  height: 30vh;
  background-color: #e0e5e7;
  border: 1px solid black;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
